<template>
  <div class="inputBox" @blur="isBlur" v-if="isShowCommentBox">
    <div class="bui-box">
      <div v-if="isMain" class="avatar-wrap avatar-wrap-center">
        <img v-if="avatar" :src="avatar" alt="">
      </div>
      <div class="input-wrap" :class="{focus: isFocus, 'not-main': !isMain}">
        <div class="c-textarea" ga_event="click_input_comment">
          <textarea v-model="inputText" :placeholder="'写下您的' + commitText + '...'" @focus="inputFocusClick"></textarea>
        </div>
        <div class="c-action" ga_event="click_publish_comment">
          <div class="c-submit" @click="onCommentClick">{{ commitText }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less" rel="stylesheet/less">
  .inputBox {
    margin-top: 12px;

    .input-wrap {
      position: relative;
      font-size: 16px;
      color: #bababa;
      border: 1px solid #3f404c;
      background: #fff;
      margin-left: 42px;
      height: 44px;
      box-sizing: content-box;

      &.focus {
        height: 100%;
        .c-textarea textarea { height: 110px; }
        .c-action {
          position: relative;
          background-color: #f4f5f6;

          .c-submit {
            background-color: #3f404c;
          }
        }
      }
      &.not-main {
        margin-left: 0;
      }
    }

    .c-textarea {
      background: #fff;
      padding: 11px 16px 0;

      textarea {
        display: block;
        font-size: 16px;
        width: 100%;
        height: 30px;
        resize: none;
        border: 0;
        outline: 0;
        padding: 0;
        transition: .4s all;
      }
    }

    .c-action {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0;
      border: none;
      height: 44px;

      .c-submit {
        float: right;
        line-height: 44px;
        background-color: #3f404c;
        width: 110px;
        height: 100%;
        color: #fff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>
<script>
  import reqwest from 'reqwest'
  import checkLogin from '../../../src/js/user'
  import eventBus from '../../../src/js/eventBus.js'
  import Cookies from 'js-cookie'
  import extend from 'lodash/extend'

  export default {
    name: 'CommentInput',
    props: {
      isShowCommentBox: {
        type: Boolean,
        default: true
      },
      group_id: {
        type: String,
        default: ''
      },
      item_id: {
        type: String,
        default: ''
      },
      dongtai_id: {
        type: Number,
        default: 0
      },
      pIndex: {
        type: Number,
        default: 0
      },
      subIndex: {
        type: Number,
        default: 0
      },
      sourceName: {
        type: String,
        default: ''
      },
      sourceText: {
        type: String,
        default: ''
      },
      avatar: {
        type: String,
        default: ''
      },
      isMain: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      COMMENT_API: function () {
        return this.isMain ? '/api/comment/post_comment/' : '/api/article/post_reply/'
      },
      commitText: function () {
        return this.isMain ? '评论' : '回复'
      },
      params: function () {
        // 子评论框一个实例一直复用，故 props 传入的参数会变，所以 params 需要动态计算
        return {
          pIndex: this.pIndex,
          subIndex: this.subIndex,
          dongtai_id: this.dongtai_id,
          isMain: this.isMain
        }
      }
    },
    data() {
      return {
        isFocus: false,
        inputText: ''
      }
    },
    methods: {
      isBlur () {
        this.isFocus = false
      },
      inputFocusClick () {
        if (this.isMain) {
          eventBus.$emit('removeChildComment')
        }
        this.isFocus = true
      },
      onCommentClick () {

        var text = this.inputText
        var insertParams = {} // 需要插入位置的评论参数对象
        var postParams = {} // 发送评论接口参数

        var commentReq = () => {

          // 判空
          if (text.replace(/\s*/ig, '').length === 0) {

            this.$Toast({
              message: this.commitText + '内容不能为空！'
            })

            return false
          }

          // 如果是回复某条回复则拼装后缀内容
          if (!this.isMain && this.params.subIndex > -1) {
            text = text + '//@' + this.sourceName + '：' + this.sourceText
          }

          postParams = {
            status: text,
            content: text,
            group_id: this.group_id,
            item_id: this.item_id,
            id: this.dongtai_id,
            format: 'json',
            aid: 24
          }

          reqwest({
            url: this.COMMENT_API,
            headers: {
              'X-CSRFToken': Cookies.get('csrftoken')
            },
            method: 'POST',
            data: postParams,
            success: (rs) => {
              if (rs.message === 'success') {
                insertParams = extend({}, this.params, {
                  text: text,
                  id: this.isMain ? rs.comment.id : rs.data.comment.id
                })

                // 通知父组件在指定位置插入这条评论，insertParams 中 pIndex+subIndex 表明位置
                eventBus.$emit('commentInsert', insertParams)

                this.inputText = ''
                this.isFocus = false
              }
            }
          })
        }

        checkLogin({
          successCb: function () {
            commentReq()
          }
        })
      }
    },
    mounted() {
      // 如果主评论框 focus，则子评论框移除，只移除 dom，实例保留
      eventBus.$on('removeChildComment', () => {
        if (!this.isMain) {
          this.$el.remove()
        }
      })
      // 如果子评论框 focus，则主评论框收缩回去
      eventBus.$on('mainCommentInputBlur', () => {
        this.isFocus = false
      })
    }
  }
</script>



// WEBPACK FOOTER //
// comment-input.vue?9d5da3e0
